<template>
  <div>
    <!-- 选择项目-->
    <el-dialog
      title="选择项目"
      :visible.sync="applydialogVisible"
      width="600px"
      class="no-dialog-padding"
    >
      <span class="stores_dialog">
        <div class="left_side">
          <div class="ipt_box">
            <input
              type="text"
              v-model="StoresValue"
              placeholder="请输入项目名称"
            />
          </div>
          <div class="store-list">
            <div
              class="side_item"
              v-for="(item, index) in itemList"
              :key="item.itemId"
            >
              <el-checkbox
                v-model="item.active"
                @change="(e) => SelectStores(e, index, item)"
                >{{ item.itemName }}</el-checkbox
              >
            </div>
          </div>
        </div>
        <div class="right_side">
          <!-- <div class="ipt_box">
              <input
                type="text"
                v-model="SelectedValue"
                placeholder="请输入门店名称"
              />
            </div> -->
          <div class="selected_stores">
            <div>已选{{ ItemsList.length }}项目</div>

            <div>
              <el-button size="mini" type="text" @click="CancleAll"
                >清空</el-button
              >
            </div>
          </div>

          <div class="store-list">
            <div>
              <div
                class="side_item"
                v-for="(ite, index) in ItemsList"
                :key="ite.itemId"
              >
                {{ ite.itemName }}
                <span class="delete_item" @click="backItem(index)">
                  <i class="el-icon-close"></i>
                </span>
              </div>
            </div>
          </div>
        </div>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="SelectAll">全选</el-button>

        <el-button @click="Cancleapply">取 消</el-button>
        <el-button type="primary" @click="Submitapply">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getStoresInfoList } from "@/api/business/project";

import { getAllItem } from "@/api/bpm/activity";
export default {
  name: "Stores",

  data() {
    return {
      applydialogVisible: false,
      StoresValue: "",
      SelectedValue: "",
      NewSearch: [],
      itemList: [
        // {
        //   name: "xx",
        //   value: 1,
        // },
      ],
      ItemsList: [],
      SelectstoresCache: {},
      ItemsAllList: [],
      ItemsAllLists: [],
      // StoresList:[],  // 门店列表
    };
  },

  watch: {
    StoresValue: function (newValue, oldValue) {
      if (newValue === "") {
        this.itemList = JSON.parse(JSON.stringify(this.ItemsAllList));
        return false;
      }

      let NewSearch = [];
      for (let i = 0; i < this.ItemsAllList.length; i++) {
        let Item = this.ItemsAllList[i];
        console.log(Item, "dada");
        console.log(this.StoresValue, "dsdsdsdsdsdsd");
        if (Item.itemName.indexOf(this.StoresValue) > -1) {
          Item.active = !!this.SelectstoresCache[Item.id] ? true : false;
          NewSearch.push(Item);
        }
      }
      this.itemList = NewSearch;
    },

    ItemsList: {
      handler(newVal) {
        let cache = [];
        for (let index = 0; index < newVal.length; index++) {
          const element = newVal[index];
          cache[element.id] = true;
        }

        this.SelectstoresCache = cache;
      },
      deep: true,
    },
  },

  created() {},

  mounted() {},

  methods: {
    setLeftData(state) {
      let cache = [];
      let array = JSON.parse(JSON.stringify(this.ItemsAllLists));
      for (let index = 0; index < array.length; index++) {
        let element = array[index];
        element.active = state;
        cache.push(element);
      }

      this.itemList = cache;
    },
    // 全选
    SelectAll() {
      this.ItemsList = JSON.parse(JSON.stringify(this.ItemsAllLists));
      this.setLeftData(true);
    },

    // 取消全选
    CancleAll() {
      this.ItemsList = [];
      this.setLeftData(false);
    },

    getItemsList(itemIds = []) {
      console.log("itemIds", itemIds);

      let newArray = itemIds.map(String);

      console.log("newArray", newArray);

      this.loading = true;
      let NewItems = [];
      getAllItem({})
        .then((res) => {
          console.log(res);
          this.loading = false;
          const { code, data } = res;
          if (code === 0) {
            // this.itemList = data;
            // this.ItemsAllList = data;

            let ids = this.ItemsList.map((item) => {
              return item.itemId;
            });
            let Arr = [];
            for (let i = 0; i < data.length; i++) {
              let Items = data[i];
              if (ids.indexOf(Items["itemId"]) === -1) {
                Items.active = false;
              } else {
                Items.active = true;
              }
              if (newArray.indexOf(Items["itemId"]) < 0) {
                Arr.push(Items);
                console.log("66666", Items["itemId"]);
              }
            }
            this.itemList = Arr;
            this.ItemsAllList = Arr;
            this.ItemsAllLists = JSON.parse(JSON.stringify(Arr));
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },

    applyStore(list) {
      if (!!list) {
        this.ItemsList = JSON.parse(JSON.stringify(list));
      }
      this.applydialogVisible = true;
    },

    SelectStores(e, index, item) {
      // console.log("e",e);
      // console.log("e1",!!e);
      // console.log("index",index);
      // console.log(item,"hsdjhsjd");
      if (!!e) {
        this.ItemsList.push(this.itemList[index]);
      } else if (!e) {
        for (let i = 0; i < this.ItemsList.length; i++) {
          const element = this.ItemsList[i];
          if (element.itemId === item.itemId) {
            this.backItem(i);
            break;
          }
        }
      }
      //
      // this.itemList.splice(index, 1);
    },

    backItem(index) {
      let item = this.ItemsList[index];
      for (let i = 0; i < this.itemList.length; i++) {
        const element = this.itemList[i];
        if (element.itemId === item.itemId) {
          this.itemList[i].active = false;
          break;
        }
      }
      this.ItemsList.splice(index, 1);
    },

    Cancleapply() {
      this.applydialogVisible = false;
    },
    Submitapply() {
      this.applydialogVisible = false;
      let Name = [];
      let Id = [];
      let itemPrice = [];
      for (let i = 0; i < this.ItemsList.length; i++) {
        Name.push(this.ItemsList[i].itemName);
        Id.push(this.ItemsList[i].itemId);
      }

      let obj = {
        itemName: Name.join(","),
        itemId: Id,
        list: this.ItemsList,
      };
      console.log("hahha", obj);
      this.$emit("change", obj);
    },
    // 新增分类
    AddSort() {
      this.dialogVisible = true;
      this.title = "新建分类";
    },
  },
};
</script>

<style lang="scss" scoped>
.stores_dialog {
  display: flex;
  .left_side {
    width: 50%;
    padding: 20px;
    .ipt_box {
      input {
        width: 100%;
        height: 30px;
        border: 1px solid #ccc;
        outline: none;
      }
    }
    .side_item {
      margin-top: 10px;
      cursor: pointer;
      height: 30px;
      line-height: 30px;
    }
  }
  .right_side {
    width: 50%;
    padding: 20px;
    .ipt_box {
      input {
        width: 100%;
        height: 30px;
        border: 1px solid #ccc;
        outline: none;
      }
    }
    .selected_stores {
      color: #232323;
      height: 30px;
      line-height: 30px;
      display: flex;
      align-content: center;
      justify-content: space-between;
    }
    .side_item {
      position: relative;
      padding-right: 60px;

      margin-top: 10px;
      .delete_item {
        position: absolute;
        top: 50%;
        margin-top: -8px;
        right: 0px;
        border-radius: 50%;
        background: red;
        text-align: center;
        line-height: 16px;
        width: 16px;
        height: 16px;
        font-size: 10px;
        color: #fff;
        cursor: pointer;
        &:hover {
          opacity: 0.8;
        }
      }
    }
  }
}

.store-list {
  height: 300px;
  overflow: auto;
}
</style>
